<template>
  <div class="container">
    <div class="top">
      <van-nav-bar

          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
      />
    </div>

    <div class="img">
      <van-image
          width="100%"
          height="100%"
          fit="contain"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
    </div>
    <div class="name">
     <span>{{item[0].name}}</span>
    </div>
    <div class="info">
      {{item[0].info}}
    </div>
    <div class="btn">
     <div>
        <van-icon name="gold-coin-o" />
       <span> {{item[0].score}}</span>
     </div>
      <van-button type="primary" @click="change">兑换游戏</van-button>
    </div>


  </div>
</template>

<script setup>
import {useRouter, useRoute} from "vue-router";
import {inject, ref, onMounted,reactive} from "vue";
import Axios from "../plugins/axios"
import {showNotify} from "vant";

const axios = inject("$axios")
const item = reactive([{name:""}])
const router = useRouter();
const route = useRoute();
const id = ref(0)
const onClickLeft = () => {
  router.back()
}
onMounted(() => {
  var path = route.path
  var idx = path.split('/')
   id.value = idx[2]
  axios.get('goods?id=' + id.value).then(res => {
    item[0] = res.data.data
  }).catch(err => {
    showNotify({type: 'danger', message: "网络异常"});
  })
})
const change = ()=>{
  var QQ = window.localStorage.getItem("qq")
  Axios.get('goods/change',{
    qq:QQ,
    score:item[0].score,
    id:id.value
  })
}
</script>

<style scoped lang="less">

.container {

  .top {
    width: 100%;
    margin: 0 auto;
  }

  .img {
    width: 100%;
    height: 300px;
    margin-bottom: 10px;
  }

  .name {
    margin: 20px auto;
    width: 90%;
   span{
     display: block;
     height: 40px;
     padding: 0 10px;
     border-radius: 10px;
     font-size: 20px;
     background-color: #409EFF;
     color: #ffffff;
     line-height: 40px;
     text-align: center;
     font-weight: 700;
     letter-spacing: 2px;
   }
  }

  .info {
    width: 90%;
    padding: 10px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    letter-spacing: 2px;
    line-height: 30px;
    text-align: start;
    text-indent: 2em;
  }
  .btn{
    width: 90%;
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform:translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    background-color: rgba(255,255,255,.5);
    border-radius: 35px;
    box-sizing: border-box;
    padding: 20px;
    font-size: 30px;
    span{
      font-weight: 700;
      font-size: 50px;
    }
  }
}

</style>